<template>
  <view class="liveVideo">
    <head-box></head-box>
    <view class="liveVideo-data tab-botton">
      <vueSearch @confirm="onSearchBlur"></vueSearch>
      <view  class="tabCurrentIndex-live">
        <view class="liveVideo-data">
          <block v-for="(item, index) in list" :key="index">
            <view
              class="liveVideo-data-item"
              :class="index > 0 ? 'liveVideo-data-items' : ''"
              @click="onLive(item)"
            >
              <view class="liveVideo-data-movePic">
                <image
                  class="avat"
                  :src="item.movePic ? $api.getImgUrl(item.movePic) : '/static/img/null.png'"
                  mode="aspectFill"
                ></image>
                <view class="liveVideo-data-notice" style="display: none">
                  <text class="liveVideo-data-radios"></text>
                  <text class="liveVideo-data-text"></text>
                </view>
              </view>
              <view class="title">
                {{ item.moveTitle }}
              </view>
              <view class="time1">
                <view class="lives">
                  <text class="text1"
                    >直播时间:<text class="datestartTime"> {{ datestartTime[index] }}</text></text
                  >
                  <text class="td">{{ item.personNumber }}人设置提醒</text>
                </view>

                <view class="details">
                  <view>
                    <text>查看详情</text>
                  </view>
                </view>
              </view>
              <u-gap height="6" bg-color="#EEEEEE"></u-gap>
            </view>
          </block>
        </view>
      </view>
      <u-loadmore :status="status" :icon-type="iconType" @loadmore="loadmore" />
    </view>
    <tabs-box></tabs-box>
  </view>
</template>

<script>
import vueSearch from '@/components/search'
import classification from '@/components/classifications'
import classVideo from '@/components/classVideo'
import { gettRunResourcesBaseList } from '@/api/training'
import { appVisit } from '@/api/app'
import { addPlayVideoCb, getLiveType, onEventDetails } from '@/common/type'
import { addUserVideoOperateTimes } from '@/api/video'
import { getMoveSearchList } from '@/api/move'
export default {
  components: {
    vueSearch,
    classVideo,
    classification,
  },
  data() {
    return {
      videoList: getLiveType(), //视频类
      showId: null, //展示视频id
      isChanged: false,
      pageNo: 1, //第几页
      pageSize: 10, //每页条数
      search: '', //搜索相关内容
      status: 'loadmore', //加载的状态
      iconType: 'flower', //加载图标样式
      isLoading: false, //是否要加载数据
      list: [], //视频数据
    }
  },
  computed: {
    //分割时间
    datestartTime() {
      return this.list.map(({ startTime }) => this.$moment(startTime).format('MM-DD  HH:mm'))
    },
  },
  watch:{

  },
  onLoad() {
    // const { tabIndex } = this.$route.query
    // this.tabCurrentIndex = parseInt(tabIndex)
    // debugger
  },
  onShow() {
    this.getMoveSearchList()
    // #ifdef H5
    console.log('分享')
    this.$wxSetShare()
    // #endif
  },
  methods: {
    //直播活动列表点击
    onLive({ activityCategory, id }) {
      return onEventDetails({ id, activityCategory }, '588')
    },
    //重置数据
    copyRest() {
      this.list = []
      this.status = 'loadmore' //加载的状态
      this.iconType = 'flower' //加载图标样式
      this.isLoading = false //是否要加载数据
      this.pageNo = 1
    },
    //视频点击分类
    async onTabelegantTabClick(title, index) {
      this.search = ''
      this.onRetSet()
      this.tabCurrentIndex = index
      if (this.tabCurrentIndex === 0) {
        this.gpVideoList()
      } else if (index === 1) {
        this.getMoveSearchList()
      }
    },

    loadmore() {
      this.pageNo++
      if (this.tabCurrentIndex === 0) {
        this.gpVideoList()
      } else if (this.tabCurrentIndex === 1) {
        this.getMoveSearchList()
      }
    },
    //视频 信息
    showVideo(showId) {
      this.showId = showId
      appVisit(11)
    },
    //重置数据
    onRetSet() {
      this.showId = null
      this.pageNo = 1
      this.status = 'loading'
      this.isLoading = false
      this.list = []
    },
    //活动-分页列表查询
    async getMoveSearchList() {
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      this.status = 'loading'
      const params = {
        moveTitle: this.search, //搜索内容
        pageNo: this.pageNo, //第几页
        pageSize: 10, //当前条数
        moveType: '100',
      }
      uni.showLoading({
        title: '活动列表加载中...',
      })
      const {
        code,
        result: { records: list, total },
      } = await getMoveSearchList(params)
      if (code === 200) {
        this.isLoading = false
        uni.hideLoading()
        if (!list.length) {
          this.status = 'nomore'
        } else {
          this.status = 'loadmore'
          this.list = [...this.list, ...list]
          if (this.list.length >= total) {
            this.status = 'nomore'
          }
        }
      } else {
        this.status = 'nomore'
        uni.hideLoading()
      }
    },

    //播放视频
    getPlayVideo(e) {
      addPlayVideoCb(addUserVideoOperateTimes, e)
    },
    //视频列表
    gpVideoList() {
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      this.status = 'loading'
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        type: 5,
        order: 'desc',
        column: 'publishTime',
        resourcesType: 2,
        deleted: '0',
        name: `*${this.search}*`,
      }
      gettRunResourcesBaseList(params).then((res) => {
        const {
          code,
          result: { records: list, total },
        } = res
        if (code === 200) {
          this.isLoading = false
          uni.hideLoading()
          if (!list.length) {
            this.status = 'nomore'
          } else {
            this.status = 'loadmore'
            this.list = [...this.list, ...list]
            if (this.list.length >= total) {
              this.status = 'nomore'
            }
          }
        } else {
          this.status = 'nomore'
        }
      })
    },
    //搜索
    onSearchBlur(value) {
      this.search = value
      this.onRetSet()
      if (this.tabCurrentIndex === 0) {
        this.gpVideoList()
      } else if (this.tabCurrentIndex === 1) {
        this.getMoveSearchList()
      }
    },
  },
  //加载到底部进行请求新的数据
  onReachBottom() {
    if (this.status === 'loadmore') {
      this.loadmore()
    }
  },
}
</script>

<style lang="scss" scoped>
.tabCurrentIndex-live {
  .liveVideo-data {
    .liveVideo-data-item {
      width: calc(100% - 60rpx);
      background-color: #ffffff;
      border-radius: 10rpx;
      margin: 30rpx auto;
      .liveVideo-data-movePic {
        position: relative;
        .avat {
          height: 298rpx;
          width: 100%;
          border-radius: 15upx;
        }
        .liveVideo-data-notice {
          width: auto;
          height: auto;
          background: #658bf0;
          border-radius: 5px;
          position: absolute;
          bottom: 23rpx;
          left: 21rpx;
          .liveVideo-data-radios {
            display: inline-block;
            width: 20rpx;
            height: 20rpx;
            border: 3rpx solid #ffffff;
            border-radius: 50%;
            margin: 0 10rpx 0 8rpx;
          }
          .liveVideo-data-text {
            padding-left: 10rpx;
            width: 40rpx;
            height: 20rpx;
            font-size: 20rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
            padding-right: 13rpx;
          }
        }
      }
      .title {
        min-height: 84rpx;
        font-size: 38rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #000000;
        padding: 24rpx 0 39rpx 0;
      }
      .time1 {
        padding: 0 0 39rpx 0;
        display: flex;
        justify-content: space-between;
        .lives {
          .text1 {
            width: auto;
            height: auto;
            font-size: 25rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #000000;
          }
          .datestartTime {
            padding-left: 20rpx;
          }
        }
        .td {
          width: auto;
          font-size: 19rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #7f8084;
          padding-left: 40rpx;
        }
        .details {
          display: flex;
          justify-content: flex-end;
          text-align: center;

          view {
            width: 152rpx;
            height: 47rpx;
            border: 1rpx solid #869cbf;
            border-radius: 50rpx;
            text {
              color: #10a8eb;
              font-weight: bold;
            }
          }
        }
      }
    }
    .liveVideo-data-items {
      padding-top: 39rpx;
    }
  }
}
</style>
